<template>
  <div class="create-container" :style="{ padding: padding + 'px' }">
      <div class="commentTitle">指标名称</div>
    <el-input v-model="indexName"  type="text" class="article-textarea" autosize
      placeholder="输入指标名称" />
      <div class="commentTitle">指标项</div>
      <div class="noMark">
        <span class="noMark-desc"  v-if="!indexList.length">没有找到任何指标体系</span>
        <el-button type="primary" round icon="el-icon-plus" size="mini" @click="handAddIndex(0)">添加一级指标</el-button>
      </div>
    <div class="index-items">
      <div class="content" v-for="(item,index) in indexList" :key="index">
        <div class="content-header">
          {{ index+1 }}、<span class="content-header_title">{{item.content}}</span>
          <span class="content-header_score">{{ item.score || 0 }}分</span>
          <div class="content-header_btngroup">
            <el-button type="text" icon="el-icon-plus" @click="handAddIndex(1,item.id,index)">下级指标</el-button>
            <el-button type="text" icon="el-icon-edit" @click="handUpdateIndex(1,item.id,index)">修改</el-button>
            <el-button type="text" icon="el-icon-close" @click="handDelIndex(1,item.id,index)">删除</el-button>
          </div>
        </div>
        <div class="content-time"><span v-show="item.create_time">创建时间：</span> {{ parseTime(item.create_time) }}</div>
        <div class="content-desc"><span v-show="item.evaluation">考核标准: </span> {{ item.evaluation }}
        </div>
        <template>
          <div class="sub-wrapper">
            <div class="content" v-for="(subItem,subIndex) in item.child" :key="subIndex">
              <div class="content-header">
                {{ index+1 }}-{{ subIndex+1 }}、<span class="content-header_title">{{subItem.content}}</span>
                <span class="content-header_score">{{ subItem.score || 0 }}分</span>
                <div class="content-header_btngroup">
                  <el-button type="text" icon="el-icon-plus" @click="handAddIndex(2,subItem.id,index,subIndex)">下级指标</el-button>
                  <el-button type="text" icon="el-icon-edit" @click="handUpdateIndex(2,subItem.id,index,subIndex)">修改</el-button>
                  <el-button type="text" icon="el-icon-close" @click="handDelIndex(2,subItem.id,index,subIndex)">删除</el-button>
                </div>
              </div>
              <div class="content-time"><span v-show="subItem.create_time">截至时间：</span> {{ parseTime(subItem.create_time) }}</div>
              <div class="content-desc"><span v-show="subItem.evaluation">考核标准: </span> {{ subItem.evaluation }}
              </div>
              <template>
                <div class="son-wrapper" style="margin-left:10px;">
                  <div class="content" v-for="(sonItem,sonIndex) in subItem.child" :key="sonIndex">
                    <div class="content-header">
                      {{ index+1 }}-{{ subIndex+1 }}-{{ sonIndex+1 }}、<span
                        class="content-header_title">{{ sonItem.content }}</span>
                      <span class="content-header_score">{{ sonItem.score }}分</span>
                      <div class="content-header_btngroup">
                            <el-button type="text" icon="el-icon-edit" @click="handUpdateIndex(3,sonItem.id,index,subIndex,sonIndex)">修改</el-button>
                            <el-button type="text" icon="el-icon-close" @click="handDelIndex(3, sonItem.id,index, subIndex, sonIndex)">删除</el-button>
                          </div>
                    </div>
                    <div class="content-time"><span v-show="sonItem.time">截至时间：</span> {{ sonItem.time}}</div>
                    <div class="content-desc"><span v-show="sonItem.evaluation">考核标准: </span> {{ sonItem.evaluation }}
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>
    <el-row type="flex" justify="center" style="margin-top:20px;">
        
        <el-button type="primary"  v-if="indexList.length" icon="el-icon-document" size="small" @click="handCreateIndex" >保存</el-button>
    </el-row>
    <el-dialog title="编辑指标" :visible.sync="dialogFormVisible" append-to-body>
      <el-form :model="indexForm" label-width="80px">
        <el-form-item label="指标内容">
          <el-input type="textarea" rows="3" v-model="indexForm.content"></el-input>
        </el-form-item>
        <el-form-item label="指标分值" prop="score" label-width="80px">
          <el-input type= "number" v-model="indexForm.score"></el-input>
        </el-form-item>
        <el-form-item label="评分标准" label-width="80px">
          <el-input type="textarea" rows="3" v-model="indexForm.evaluation"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateIndex()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    postCreateTask,
    getIndexByid,
    updateIndex,
    createIndex,
    deleteIndex,
    delTask
  } from '@/api/work.js'
  import {
    getTable,
    getQuestion
  } from '@/api/question.js'
  import {
    parseTime
  } from '@/utils/index'
  import axios from 'axios'
  import Cookies from 'js-cookie'
  export default {
    name: 'BaseIndex',
    watch: {
      dialogFormVisible(val){
        if(!val){
          this.clearIndexForm()
        }
      }
    },
    props:{
      isLink:{
        type: Boolean,
        default: true
      },
      padding:{
        type: Number,
        default: 30
      }
    },
    data() {
      return {
        dialogFormVisible: false,
        indexName: '',
        indexForm: {
          score: '',
          evaluation: '',
          content: '',
          child:[]
        },
        initIndexData:[{
          content: '',
          score: '',
          evalutaion: ''
        }], // 初始化一级指标列表
        indexType: 0,
        parentId: null,
        initIndexId: null,
        indexId: {},
        isUpdate: false,
        indexList: []
      }
    },
    methods: {
      parseTime,
      // 添加子级指标
      handAddIndex(type = 0, parentId = null, index = 0, subIndex = 0, child = 0) {
        if(!this.indexName){
          this.$message.warning('请输入指标名称')
          return
        }
          this.isUpdate = false
          this.parentId = parentId
        this.dialogFormVisible = true
        this.indexType = type
        this.indexId = {
          first: index,
          second: subIndex,
          three: child
        }
      },
      // 修改子级指标
      handUpdateIndex(type = 0, parentId = null, index = 0, subIndex = 0, child = 0){
        this.isUpdate = true
        this.parentId = parentId
        this.dialogFormVisible = true
        this.indexType = type
        this.indexId = {
          first: index,
          second: subIndex,
          three: child
        }
        switch (type) {
          case 1:
            this.indexForm = this.indexList[index];
            break
          case 2:
            this.indexForm = this.indexList[index].child[subIndex];
            break
          case 3:
            this.indexForm = this.indexList[index].child[subIndex].child[child];
            break
        }
      },
      // 删除子级指标
      handDelIndex(type = 0, currenid=null, index = 0, subIndex = 0, child = 0){
        this.$confirm('是否确定删除指标项？', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          switch (type) {
            case 1:
              this.indexList.splice(index , 1)
              break
            case 2:
              this.indexList[index].child.splice(subIndex, 1);
              break
            case 3:
              this.indexList[index].child[subIndex].child.splice(child, 1);
              break
        }
        }).catch(() => {
           
        })
      },
      // 提交创建指标请求
      handCreateIndex(){
        createIndex({ name: this.indexName, tardetail: this.indexList}).then(res =>{
          if(res && res.data && res.data.create_time ){
            this.$notify({
                    title: '成功',
                    message: '创建指标成功',
                    type: 'success'
                });
                this.$emit("createUp", res.data)
            if(this.isLink){
              this.$router.push({name:"List"})
            }
          }
        })
      },
      // 弹框确定 修改静态指标项值
      updateIndex() {
        const type = this.indexType
        const {
          first,
          second,
          three
        } = this.indexId
        // 判断指标内容是否为空
        if(!this.indexForm.content){
          this.$message.warning('请输入指标内容')
          return
        }
        if(!this.indexForm.score || !/^\d+$/g.test(this.indexForm.score)){
          this.$message.warning('请输入有效的指标分数')
          return
        }
        
        if(!this.isUpdate){
          // this.indexForm.parent = this.parentId
          switch (type) {
                case 0:
                  this.indexList.push(this.indexForm);
                  break
                case 1:
                  this.indexList[first].child.push(this.indexForm);
                  break
                case 2:
                  this.indexList[first].child[second].child.push(this.indexForm);
                  break
              }
          this.dialogFormVisible = false
  
        }else{
          switch (type) {
              case 1:
                this.indexList.splice(first , 1,this.indexForm)
                break
              case 2:
                this.indexList[first].child.splice(second, 1, this.indexForm);
                break
              case 3:
              this.indexList[first].child[second].child.splice(three, 1, this.indexForm);
                  break
              }
              this.dialogFormVisible = false
        }
    },
      clearIndexForm(){
        this.indexForm = {
            content:'',
            score: '',
            evaluation: '',
            child:[]
        }
        this.isUpdate = false
      }
    }
  }

</script>
<style lang="scss">
  .create-container {
    /* padding: 30px; */
    .article-textarea{
        margin-bottom: 10px;
    }
    .commentTitle{
        display: inline-block;
    padding: 5px 0;
    font-size: 16px;
    }
    .noMark{
      padding-bottom: 10px;
      &-desc{
      font-size: 18px;
      color: #ccc;
      }
    }
    .index-items {
      .content {
        padding: 4px 6px;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px #ccc;

        &-header {
          display: flex;
          flex-wrap: wrap;
          padding: 5px 0;
          background: #f5f5f5;

          &_title {}

          &_score {
            padding: 0 10px;
            color: red;
          }

          &_btngroup {
            display: none;

            .el-button {
              padding: 0;
            }
          }

        }

        &:hover {
          .content-header_btngroup {
            display: inline-block;
          }
        }

        &-time,
        &-desc {
          font-size: 14px;
          line-height: 1.5;
          color: #a7a7a7;
          text-indent: 2em;
        }

        .sub-wrapper {
          .content {
            margin-left: 25px;

            .content-time,
            .content-desc {
              text-indent: 2.8em;
            }
            .son-wrapper{
                .content {

            .content-time,
            .content-desc {
              text-indent: 3.6em;
            }
                }
            }
          }
        }
      }
    }
  }

</style>
